本节主要讲解 H5+ API 扫码接口,移动端的小字与1px像素边框的处理。
# 页面布局
当前页面的布局沿用在上一节中提到的布局。为两部分:头部标题栏 + 滚动浏览区域。头部标题栏 fixed 固定,内容区用 scroll-view 组件撑开整个页面。
相关代码:
<view>
<!-- 头部 -->
<uni-nav-bar fixed :status-bar="true">
头部内容
</uni-nav-bar>
<!-- 滚动区域 -->
<scroll-view scroll-y="true" class="page-content" @scroll="scroll" :scroll-top="scrollTop">
滚动区域内容
</scroll-view>
</view>
data() {
return {
scrollTop: 0
};
},
methods: {
// 滚动到顶部标题变换
scroll (e) {
let scrollTop = e.detail.scrollTop
if (scrollTop < 5) {
this.title = ''
this.scrollTop = 0
} else {
this.title = '账号'
}
},
}
@前端进阶之旅: 代码已经复制到剪贴板
这里有区别于其他开发页面的是,页面标题栏标题当滚动区域滚动到一定位置时隐藏,由 scroll() 处理监听滚动,当滚动位置达到一定位置时,scroll 页面到滚到顶部并清空标题。使用 scrollTop < 5 而不是 scrollTop == 0 的原因是用户操作触发的滚动值未必会精确到 0,这里对值进行了取舍,临近顶部的时候,取值 scrollTop 为 0。如果运动点达到某一个取值的时候,就让这个点达到理想值下。这是很多运动动画操作的一个方法。
# cell组件

对于这种 cell 样式使用 flex 布局可以快速解决左(图标)+ 右(cell内容)的排版。这种存在重复性的页面可以考虑使用组件去复用,在这里我使用了uni-list-item 组件。
<uni-list>
<uni-list-item title="口袋彩铃" thumb="/static/image/account/a_16.png" size='mini'/>
<uni-list-item title="我的订单" thumb="/static/image/account/a_19.png" size='mini' border0/>
<uni-list-item title="创作者中心" thumb="/static/image/account/a_09.png" size='mini' border0 class="mt16"/>
<!-- more items -->
</uni-list>
import uniList from '@/components/uni-list/uni-list.vue'
import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
export default {
components: {
uniList,
uniListItem,
},
data() {
return {}
}
}
@前端进阶之旅: 代码已经复制到剪贴板
对于拿来即用的组件,可能还会与自己实际业务上的设计还有一定差距,这个时候就要自己动手扩展组件属性。根据cell高度需求我在这添加了属性 size='mini' border0,这样 uni-list-item 子组件对着两个属性进行判定 class 名字,样式根据类名进行样式处理:
<!-- uni-list-item.vue -->
<view class="uni-list-item__container" :class="[{'border': border0}, size]">
<!-- 内容 -->
</view>
props: {
size: { // 缩略图尺寸
type: String,
default: ''
},
border0: { // 无边框
type: Boolean,
default: false
},
}
.uni-list-item__container {
&:before{
position:absolute;
content: '';
right:0;
bottom:0;
width:600rpx;
border-top: 1px solid #e6e6e6;
transform: scaleY(0.5);
}
&.mini{
padding: 30rpx 30rpx 30rpx 0;
&:before{
width:646rpx;
}
}
&.border:before{
border:0; // 去掉边框
}
}
